<template>
	<view @click="isMore = false">
		<!-- banner，标题 -->
		<view class="banner-title">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in goodsInfo.img_list" :key="index">
						<image :src="item" mode="aspectFill"></image>

					</swiper-item>
				</swiper>
			</view>

			<!-- 标题 -->
			<view class="goods-title">
				<text>{{goodsInfo.title}}</text>
			</view>

		</view>


		<!--店铺 -->
		<view class="shop">
			<view class="shop-list">
				<view class="dizhi">
					<view class="">
						地址：{{address.address}}
					</view>
				</view>
			</view>

		</view>
		<!-- 属性 -->
		<view class="shuxing">
			<view class="shuxing-list">
				<view class="title">
					商品参数
				</view>
				<view class="list" v-for="el in goodsInfo.attribute">
					<view class="weight">
						{{el._key}}:
					</view>
					<view class="canshu">
						{{el._value}}
					</view>
				</view>
			</view>
			<view class="xiangqing">
				<view class="title">
					详情介绍
				</view>
				<text>{{goodsInfo.introduce}}</text>
			</view>

		</view>
		<!-- 底部 -->
		<view class="page-footer">
			<view class="footer-fn">
				<view class="list" @click="gotoService">
					<text class="iconfont icon-kefu"></text>
					<text>聊一聊</text>
				</view>
				<!-- <view class="list">

					<u-icon v-if="goodsInfo.collection" class="icon" id="myIcon" name="star-fill" label="收藏"
						label-size="26rpx" labelPos="bottom" color="red" size="20" @click="toggleIcon()"></u-icon>
					<u-icon v-else class="icon" id="myIcon" name="star-fill" label="收藏" label-size="26rpx"
						labelPos="bottom" color="block" size="20" @click="toggleIcon()"></u-icon>
				</view> -->

			</view>
			<view class="footer-buy">

				<view class="buy-at" @click="$refs['GoodsAttr'].show(1)">
					<text>立即换</text>
				</view>
			</view>
		</view>

		<!-- 属性规格 -->
		<goods-attr :goodsInfo="goodsInfo" ref="GoodsAttr"></goods-attr>
		<view style="background-color: #f00;color: #fff;" v-html="htmls"> </view>
	</view>
</template>

<script>
	import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';
	import {
		getgoodsAddress
	} from '@/config/api.js';
	export default {
		components: {

			GoodsAttr,
		},
		data() {
			return {
				goodsInfo: uni.getStorageSync('yihuogoods'),
				address: {},
			};
		},
		onLoad(options) {
			getgoodsAddress({user_id: this.goodsInfo.user_id}).then(res => {
				this.address = res;
			});
			
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * 返回
			 */
			
			gotoService() {
				// +'&nav_id='+this.storeInfo.nav_id
				const nav_id = -2;
			
				uni.navigateTo({
					url: '/pages/DiscountsActivity/DiscountsActivity?nav_id='+nav_id+'&toUserId='+this.goodsInfo.user_id
				})
			},
			PurchaseNotes() {
				console.log(4444)
				getAgreement(5).then(res => {
					this.htmls = res;
				})
			},
			SellerRights() {
				console.log(3333)
				getAgreement(4).then(res => {
					this.htmls = res;
				})
			},
			showAboutUs() {
				console.log(2222)
				this.htmls = this.storeInfo.introduce;
			},
			toggleIcon() {
				const data = {};
				if (this.goodsInfo.collection) {
					data['id'] = this.goodsInfo.id;
					this.goodsInfo.collection = false;
				} else {
					data['goodsId'] = this.goodsInfo.id
					data['note'] = 1; // 区分收藏的 类型 1是商品
					this.goodsInfo.collection = true;
				}
				collection(data).then(res => {

				})
			},
			

			onBack() {
				uni.navigateBack();
			},
		
			// g改变收藏颜色
			changeColor() {
				const icon = document.getElementById('myIcon');
				const currentName = icon.getAttribute('name');

				// 切换图标名称
				if (currentName === 'star-fill') {
					icon.setAttribute('name', 'star'); // 切换为 star
				} else if (currentName === 'star') {
					icon.setAttribute('name', 'yans'); // 切换为 yans
				} else {
					icon.setAttribute('name', 'star-fill'); // 切换回 star-fill
				}
			},

			/**
			 * 降价通知点击
			 */
			onDepreciate() {
				uni.showToast({
					title: '降价通知提醒成功',
					icon: 'success'
				})
			},
			/**
			 * 关注点击
			 */
			onAttention() {
				if (this.AttentionShow === 0) {
					this.AttentionShow = 1;
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				} else {
					this.AttentionShow = 0;
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
				}

			},
			/**
			 * 评价点击
			 */
			onEvaluate() {

			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'details.scss';
</style>